<template>
	<div class="bottom-bar">
		<div class="check-content">
			<check-button   
			class="check-button"  
			:is-checked="isSelectAll"
			@click.native="checkclick"/>
			<span>全选</span>
		</div>
		
		<div class="price">
			合计:{{totalPrice}}
		</div>
		
		<div class="calculate" @click="calcClick">
			去计算({{totalCount}})
		</div>
	</div>
</template>

<script>
	import CheckButton from 'components/content/checkButton/CheckButton.vue'
	import {mapGetters} from 'vuex'
	export default{
		name:'CartBottomBar',
		components: {CheckButton},
		computed: {
			...mapGetters(['cartList','totalPrice', 'totalCount']),
			//总价
		
			// //判断全选，全部选
			isSelectAll(){
				//判断cartList长度是否全等于0，如果等于就返回false
			  if(this.cartList.length === 0) return false
				
				//1.使用filter()方法
				//return !(this.cartList.filter(item => !item.checked).length)
			
				//2.使用find() 推荐用这个方式
				return !this.cartList.find(item => !item.checked)
				//3.普通的遍历
				// for (let item of this.cartList) {
				// 	if(!item.checked) {
				// 		return false
				// 	}
				// }
				// return true
			}
		},
		methods: {
			//全选按钮
			checkclick(){
				if(this.isSelectAll){//全部选中
					this.cartList.forEach(item => item.checked = false)
				} else{ //部分或全部不选中
					this.cartList.forEach(item => item.checked = true)
				}
			},
			calcClick(){
				if(!this.isSelectAll) {
					this.$toast.show('请选择购买的商品', 2000)
				}
			}
		}
	}
</script>

<style scoped>
	.bottom-bar{
		height:40px;
		background-color: #eee;
		position: fixed;
		bottom: 49px;
		display: flex;
		left: 0;
		right: 0;
		line-height: 40px;	
		text-align: center;
		font-size: 13px;
}
.check-content{
	display: flex;
	align-items: center;
	margin-left: 10px;
	width: 60px;
}
	.check-button{
		display: flex;
		width: 20px;
		height: 20px;
		line-height: 22px;
	}
	.check-content span{
		margin-left: 5px;
	}
	.price{
		margin-left: 20px;
		flex: 1;
	}
	.calculate{
		width: 90px;
		background-color: red;
		color: #fff;
	}
</style>
